@charset "UTF-8";
@import 'config';

.header {
  @include h(88);
  background-color: #da0900;
  .content {
    position: relative;
    @include w(710);
    margin: 0 auto;
    img {
      display: inline-block;
      position: absolute;
      @include l(30);
      @include lh(88);
      @include mt(24);
    }
    .title {
      @include fs(36);
      color: white;
      display: inline-block;
      position: absolute;
      left: 45%;
      @include w(108);
      @include lh(88);
    }
    .del {
      @include fs(28);
      color: white;
      display: inline-block;
      position: absolute;
      @include r(30);
      @include lh(88);
    }
  }
}
.main{
  background-color: #e7e7e7;
  .radio{
    vertical-align: top;
    display: inline-block;
    @include w(40);
    @include h(40);
    @include mt(80);
    @include ml(46);
    @include border(2,solid,#999 );
    border-radius: 50%;
    background-image:url("../img/shop_cart_ radio.png") ;
    background-repeat: no-repeat;
    background-size: cover;
    @include bgp(-100,0);
    &:hover{
      @include border(2,solid,white);
      @include bgp(0,0)
    }
  }
  ul{
    li{
      background-color: #fff;
      @include h(210);
      @include pt(10);
      @include mt(10);
      @include mb(20);

      img{
        @include w(188);
        @include h(188);
        @include ml(20);
        display: inline-block;
      }
      .content{
        position: relative;
        display: inline-block;
        @include w(420);
        vertical-align: top;
        h4{
          @include fs(24);
          @include lh(30);
          font-style:normal;
          font-weight: normal;
        }
        .colour{
          @include mt(10);
          @include mb(50);
          color: #999999;
          font-style:normal;
          @include fs(24);
          i{
            font-style:normal;
          }
        }
        label{
          span{
            @include w(50);
            @include h(50);
            display: inline-block;
            @include border(1,solid,#999);
            @include lh(50);
            @include fs(36);
            text-align: center;
            &:active{
              color: red;
            }
          }
          input{
            @include w(80);
            @include h(48);
            vertical-align: top;
            @include ml(-8);
            @include mr(-8);
            @include fs(30);
            border: 1px solid #999;
            text-align: center;
          }
        }
        .price{
          position: absolute;
          @include r(20);
          @include t(50);
          i{
            @include fs(24);
            font-style:normal;
            display: block;
            @include mb(20)
          }
          s{
            @include fs(24);
            display: block;
            color:#999;
          }
        }
      }
    }
  }
  .balance{
    position: relative;
    @include h(100);
    background-color: white;
    .radio{
      @include mt(0);
      vertical-align: middle;
    }
    span{
      @include fs(20);
      @include ml(10);
      @include lh(100)
    }
    .total{
      display: inline-block;
      @include fs(24);
      @include ml(216);
      i{
        @include fs(30);
        @include ml(-10);
        color: red;
      }
    }
    button{
      display: inline-block;
      @include fs(30);
      @include w(186);
      @include h(100);
      background-color: red;
      color: white;
      border: transparent;
      position: absolute;
      @include r(0);
    }
  }
}